// USER VARIABLES SECTION

$accent: orange // Accent Color
$fontsize: 16px // Body Font Size
$textcolor: #333 // Text Color
$system: -apple-system, BlinkMacSystemFont, Arial, sans-serif // System Font Family
$montserrat: Montserrat, sans-serif // Montserrat Font Family

// Linear Gradient: hsl(236, 72%, 79%) to hsl(237, 63%, 64%)
$colorGradient1: hsl(236, 72%, 79%)
$colorGradient2: hsl(237, 63%, 64%) // основн

// Very Light Grayish Blue: hsl(240, 78%, 98%)
$colorVLBlue: hsl(240, 78%, 98%)

// Light Grayish Blue: hsl(234, 14%, 74%)
$colorLightBlue: hsl(234, 14%, 74%)

// Grayish Blue: hsl(233, 13%, 49%)
$colorGBlue: hsl(233, 13%, 49%)

// Dark Grayish Blue: hsl(232, 13%, 33%)
$colorDarkBlue: hsl(232, 13%, 33%)


// Bootstrap compatible gutter variable => $gutter
$grid-gutter-width: 20px
$gutter: $grid-gutter-width

// IMPORT SECTION

@import 'node_modules/bootstrap/scss/bootstrap-reboot.scss' // Bootstrap Reboot collection
@import 'node_modules/bootstrap/scss/mixins/_breakpoints.scss' // Bootstrap Breakpoints mixin
// @import 'node_modules/bootstrap/scss/bootstrap-grid.scss' // Optional Bootstrap Grid
// @import 'node_modules/bootstrap/scss/utilities/_sizing.scss' // Optional Bootstrap Utilites

// FONTS LOAD SECTION

@mixin font($fname, $fstyle, $fweight, $furl)
	@font-face
		font-family: $fname
		font-style: $fstyle
		font-weight: $fweight
		// font-display: swap // Uncomment to initially display system fonts
		src: local($fname), url($furl) format('woff2')

//@include font('Roboto', normal, 400, '../fonts/roboto-regular-webfont.woff2')
//@include font('Roboto', italic, 400, '../fonts/roboto-italic-webfont.woff2')
//@include font('Roboto', normal, 700, '../fonts/roboto-bold-webfont.woff2')
//@include font('Roboto', italic, 700, '../fonts/roboto-bolditalic-webfont.woff2')
@include font('Montserrat', normal, 700, '../fonts/montserrat-bold-webfont.woff2')

// GENERAL DOCUMENT STYLES

::placeholder
	color: #666

::selection
	background-color: $accent
	color: #fff

input, textarea
	outline: none
	&:focus:required:invalid
		border-color: red
	&:required:valid
		border-color: green

body
	font-family: $montserrat
	font-size: $fontsize
	min-width: 320px
	position: relative
	line-height: 1.65
	overflow-x: hidden
	color: $textcolor

.container
	max-width: 1440px
	min-width: 375px
	margin: 0 auto